<template>
  <div>
    <a-breadcrumb style="margin: 16px" separator=">">
      <a-breadcrumb-item
        v-for="(item, index) in $route.matched"
        :key="index"
        :to="{ path: item.path }"
        style="cursor: pointer"
      >
        {{ item.meta.title }}
      </a-breadcrumb-item>
    </a-breadcrumb>
    <div class="content">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
        :rules="rules"
        ref="formRef"
        class="form"
      >
        <a-form-item label="新手机" name="phone">
          <a-input-password v-model:value="formState.phone" />
        </a-form-item>
        <!-- 验证码 -->

        <div class="code">
          <a-form-item name="vCode">
            <a-input
              v-model:value="vCode"
              placeholder="确输入验证码"
              class="codeText"
            ></a-input
          ></a-form-item>

          <VerifyCode
            style="
              position: relative;
              top: -60px;
              left: 180px;
              width: 120px;
              height: 30px;
            "
            @handleTxt="handleTxt"
            ref="codeDom"
          />
        </div>
        <!-- <div class="codeErr" ref="codeErrRef">请输入正确的验证码</div> -->
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button
            html-type="submit"
            style="border: none; color: #816d65; margin-left: 28%"
            >确定</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import VerifyCode from "@/components/canvas/verificationCode";
import { updataPersonalMsg } from "@/service/api.js";
import { message } from "ant-design-vue";
import LocalCatch from "@/utils/token.js";
const formState = ref({
  phone: "",
  userId: parseInt(LocalCatch.getToken("userId")),
});
// 输入验证码
const vCode = ref("");
// 正确验证码
const codeText = ref("");
// 表单dom
const formRef = ref(null);
//验证码dom
const codeDom = ref(null);

// 每次加载页面刷新验证码

const onFinish = (values) => {
  console.log("Success:", values);
  formRef.value
    .validate()
    .then(async () => {
      // 校验通过
      const res = await updataPersonalMsg({
        ...formState.value,
      });
      console.log(res);
      if (res.code === 1) {
        formState.value = {};
        vCode.value = "";
        message.success("修改成功");
      } else message.error("修改失败");
    })
    .catch((err) => {});
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
  vCode.value = "";
  codeDom.value.draw();
};
const handleTxt = (code) => {
  codeText.value = code;
};
// 电话校验
const validatorUserPhone = (rule, value) => {
  if (!/^[1][3-9][0-9]{9}$/.test(value)) {
    return Promise.reject("请输入正确格式的手机号！");
  } else {
    return Promise.resolve();
  }
};
// 验证码校验
const validatorvVCode = (rule, value) => {
  if (vCode.value.toLowerCase() !== codeText.value.toLowerCase()) {
    return Promise.reject("请输入正确的验证码");
  } else return Promise.resolve();
};
const rules = {
  phone: [{ validator: validatorUserPhone, required: true }],
  vCode: [{ required: true, validator: validatorvVCode }],
};
</script>
<style scoped>
/* 验证码 */
.code {
  position: relative;
  width: 340px;
  left: 34%;
}
.codeText {
  width: 130px;
}
.codeErr {
  display: none;
  position: relative;
  top: -28px;
  color: #ff4d4f;
  font-size: 14px;
}
.content {
  display: flex;
  flex-flow: column nowrap;
  margin-top: 40px;
  .form {
    position: relative;
    left: 20%;
    width: 450px;
  }
}
</style>
